<template>
  <div class="wrap">
    <div v-if="this.productIdentification">
      <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
        {{ tag }}
      </el-tag>
    </div>
    <el-button v-if="!this.productIdentification" type="primary" icon="el-icon-plus" size="mini" plain @click="search = true;drawer=true">
      选择产品
    </el-button>
    <el-drawer :modal='false' title="选择产品" :visible.sync="drawer" @close="closeDrawer" show-close>
      <el-row>
        <el-table ref="myTable" highlight-current-row v-loading="loading" :data="productList"
          @row-click="productListItem">
          <el-table-column align="center" label="id" prop="id" />
          <el-table-column align="center" label="产品名称" prop="productName" />
          <el-table-column align="center" label="产品标识" prop="productIdentification" />
        </el-table>
        <pagination v-show="productTotal > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"
          :total="productTotal" @pagination="getProductList" />
      </el-row>
      <el-row style="padding:20px 30px">
        <el-button type="primary" @click="confirm()">确 定</el-button>
        <el-button @click="cancelD()">取 消</el-button>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
  import {
    listProduct
  } from "@/api/iot/product";

  export default {
    props: {
      flag: {
        type: Number,
        defalut: 1
      },
      set_productIdentification: {
        type: String,
        default: ""
      },
    },
    data() {
      return {
        loading:false,
        falg: 1,
        productIdentification: "",
        dynamicTags: [],
        clickList: {},
        OldClickList: {},
        drawer: false,
        // 产品查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          productIdentification: null,
        },
        productList: [],
        productTotal: 0,
        form: {}
      }
    },
    mounted() {
      this.getProductList();
      this.productIdentification = this.set_productIdentification
      this.dynamicTags = [this.productIdentification]
    },
    watch: {},
    methods: {
      confirm() {
        this.falg = 1
        this.drawer = false
      },
      cancelD() {
        this.falg = 2
        this.drawer = false
      },
      productListItem(row) {
        console.log(row);
        this.clickList = {
          productIdentification: row.productIdentification
        }
      },
      //el-drawer关闭回调
      closeDrawer() {
        if (this.falg === 1) {
          this.productIdentification = this.clickList.productIdentification;
          this.dynamicTags = [this.clickList.productIdentification]
          this.OldClickList = {
            productIdentification: this.clickList.productIdentification
          }
        } else if (this.falg === 2) {
          this.productIdentification = this.OldClickList.productIdentification;
          this.dynamicTags = [this.OldClickList.productIdentification]
        }
        if (this.flag === 1) {
          this.$emit('searchProduct', this.productIdentification)
        } else if (this.flag === 2) {
          this.$emit('addProduct', this.productIdentification)
        } else if (this.flag === 3) {
          this.$emit('setProduct', this.productIdentification)
        }
      },
      // el-tag关闭回调
      handleClose(tag) {
        this.productIdentification = '';
        this.dynamicTags = [];
        if (this.flag === 1) {
          this.$emit('searchProduct', this.productIdentification)
        } else if (this.flag === 2) {
          this.$emit('addProduct', this.productIdentification)
        } else if (this.flag === 3) {
          this.$emit('setProduct', this.productIdentification)
        }
      },
      /** 查询设备档案列表 */
      getProductList() {
        this.loading = true;
        listProduct(this.queryParams).then((response) => {
          this.productList = response.rows;
          this.productTotal = response.total;
          this.loading = false;
        });
      },
    }
  }
</script>

<style scoped lang="scss">
</style>
